<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
    <style>
        body{
            background-image:url("image/bg.png");
            background-size: 100%,100%;
        }

        .mainBox{
            width:600px;
            height: 500px;
            background-color:white;

            top:50%;
            left:50%;
            margin: -300 -250 -250 -300;
            position: absolute;

            text-align: center;
            line-height: 80px;
            padding-top: 40px;

            border-radius: 5%;
            border-color: white;
            border-style: solid;
            border-width: 5px;
            box-shadow: 10px 10px 5px gray;

            color: black;
        }

        .button{
            width: 150px;
            height: 25px;
            background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
            border:none;
            border-radius: 5px;
            box-shadow: 5px 5px 2px gray;
            color: black;
        }
        .button:hover{
            background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
        }
        .userinfo{
            width:300px;
            padding-top: 10px;
            outline: none;
            border: none;
            border-bottom: 3px solid black;
            background-color: rgba(255, 255, 255, 0);
            text-align: center;
        }

    </style>

</head>
<body>
<div class="mainBox">
    <form action="signupServlet" method="post" id="signUp-from-label">
        <div id="infoDiv">
            <h1>Sign up</h1>
            <!--
                <c:if test="${requestScope.signupMsg == null}">
                    <h4 style="line-height:25px ;">欢迎注册!</h4>
                </c:if>
                <c:if test="${requestScope.signupMsg != null}">
                    <h4 style="line-height:25px ;color: red;">${requestScope.signupMsg}</h4>
                </c:if>
            -->
            <div id="tips">
                <c:if test="${requestScope.signupMsg == null}">
                    <h4 style="line-height:25px ;">欢迎注册!</h4>
                </c:if>
                <c:if test="${requestScope.signupMsg != null}">
                    <h4 style="line-height:25px ;color: red;">${requestScope.signupMsg}</h4>
                </c:if>
            </div>
            <p><input type="text" placeholder="请输入用户名" class="userinfo" name="username" id="username"></p>
            <p><input type="password" placeholder="请输入密码" class="userinfo" name="password" id="password"></p>
            <p><input type="password" placeholder="请再次输入密码" class="userinfo" name="repassword" id="repassword"></p>
            <p><input type="text" placeholder="请输入验证码" class="userinfo" name="code" id="code"></p>
            <!--从ValidateCodeServlet处获取验证码，直接让图片链接访问ValidateCodeServlet-->
            <p style="line-height:25px;">验证码：<img id="img" src="validateCode" onclick="changeImg()" title="看不清？点击换一张"/></p>
            <!--绑定点击事件，更换验证码，在script中-->

            <p style="line-height:25px;">&nbsp</p>
            <p><input type="button" value="注册" class="button" id="signUpButton" onclick="onSignUpClick()"></p>
        </div>
    </form>
</div>
</body>

<script type="text/javascript">
    //全局变量区域
    var infoDiv = document.getElementById("infoDiv")
    var username=document.getElementById("username");//用户名
    var password=document.getElementById("password");//密码
    var repassword=document.getElementById("repassword");//重复密码
    var tips=document.getElementById("tips");//提示信息
    var xhr='';//xhr对象
    var validateCode = document.getElementById("code");//验证码
    var isUsernameValid=false;
    var isPasswordValid=false;
    var formlabel=document.getElementById('signUp-from-label');//表单
    //****

    //添加监听器区域
    username.addEventListener("blur",checkUsernameValid,false);
    password.addEventListener("blur",checkPasswordValid,false);
    repassword.addEventListener("blur",checkPasswordValid,false);
    //****

    //检查用户名是否合法：先判空，不为空的话判是否存在
    function checkUsernameValid(){
        if(username.value == '' || username.value==null || username.value==undefined){
            tips.innerHTML='';
            tips.innerHTML+='<h4 style="line-height:25px ;color: red;">用户名不能为空!</h4>';
            isUsernameValid=false;
            return isUsernameValid;

        }else{
            // tips.innerHTML='';
            // tips.innerHTML+='<h4 style="line-height:25px ;">欢迎注册!</h4>';
            checkIsExit(username.value);
            return isUsernameValid;
        }

    }

    //异步请求验证用户名是否存在
    function checkIsExit(usernameStr){
        xhr=new XMLHttpRequest();
        xhr.onreadystatechange = usernameExitProcess;
        xhr.open('GET','usernameExit?username='+usernameStr);
        xhr.send(null);
    }

    function usernameExitProcess(){
        if(xhr.readyState === 4) {
            if(xhr.status === 200) {
                var responseText = xhr.responseText;
                if(responseText=="No"){
                    isUsernameValid=true;
                    if(checkPasswordValid())//检查密码状态是否合法
                    {
                        tips.innerHTML = '';
                        tips.innerHTML += '<h4 style="line-height:25px ;">欢迎注册!</h4>';
                        console.log("检查用户名重复");
                    }

                }else{
                    isUsernameValid=false;
                    tips.innerHTML='';
                    tips.innerHTML+='<h4 style="line-height:25px ;color: red;">用户名已经存在!</h4>';
                }
            }
        }
    }
    //****

    //检查密码是否合法
    function checkPasswordValid(){
        if(isUsernameValid === false)//确保先检验用户名
        {
            return ;
        }
        if(password.value === ""||repassword.value === "")//如果密码栏有未填写，判断状态合法
        {
            return true;
        }
        if(password.value==='' || password.value===null || password.value===undefined){
            tips.innerHTML='';
            tips.innerHTML+='<h4 style="line-height:25px ;color: red;">密码不能为空!</h4>';
            isPasswordValid=false;
            return isPasswordValid;

        }else if(repassword.value!==password.value&&repassword.value!=='' && repassword.value!==null){
            tips.innerHTML='';
            tips.innerHTML+='<h4 style="line-height:25px ;color: red;">两次输入的密码不一致!</h4>';
            isPasswordValid=false;
            return isPasswordValid;

        }
        tips.innerHTML='';
        tips.innerHTML+='<h4 style="line-height:25px ;">欢迎注册!</h4>';

        isPasswordValid=true
        return isPasswordValid;
    }

    //点击注册按钮
    function onSignUpClick(){
        if(isUsernameValid && isPasswordValid){
            formlabel.submit();
        }
    }

    //切换图片函数
    function changeImg() {
        document.getElementById("img").src="validateCode?count="+Math.random();
    }
</script>
